<script setup lang="ts">
import { RouterView, useRouter } from 'vue-router'
import { defineComponent, h, ref } from 'vue'
import { NIcon, NSpace, NLayout, NLayoutSider, NMenu } from 'naive-ui'
import type { MenuOption } from 'naive-ui'
import { BookmarkOutline, CaretDownOutline } from '@vicons/ionicons5'
import microApp, { getActiveApps, removeDomScope } from '@micro-zoe/micro-app'
const menuOptions: MenuOption[] = [
  {
    label: '数据填报',
    key: 'DataFill',
    href: 'DataFill',
    name: 'biApp'
  },
  {
    label: 'ETL',
    key: 'Etl',
    href: 'Etl',
    name: 'biApp'
  },
  {
    label: '数据管理',
    key: 'DataManage',
    href: 'DataManage',
    name: 'biApp'
  }
  // {
  //   label: '可视化',
  //   key: 'chart',
  //   href: '/chart',
  //   name: 'chart'
  // },
  // {
  //   label: 'Nocodb',
  //   key: 'nocodb',
  //   href: '/noco'
  // }
]
const router = useRouter()
const renderMenuLabel = (option: MenuOption) => {
  if ('href' in option) {
    return h(
      'div',
      {
        onClick: () => {
          router.push('/app/bi?bi=' + option.href)
          microApp.setData(option.name as string, { path: option.href })
        }
      },
      option.label as string
    )
  }
  return option.label as string
}
const renderMenuIcon = (option: MenuOption) => {
  // 渲染图标占位符以保持缩进
  if (option.key === 'sheep-man') return true
  // 返回 falsy 值，不再渲染图标及占位符
  if (option.key === 'food') return null
  return h(NIcon, null, { default: () => h(BookmarkOutline) })
}
const expandIcon = () => {
  return h(NIcon, null, { default: () => h(CaretDownOutline) })
}
const collapsed = ref(false)
</script>

<template>
  <main class="container">
    <n-space vertical>
      <n-layout has-sider style="height: 100vh">
        <n-layout-sider
          bordered
          collapse-mode="width"
          :collapsed-width="64"
          :width="240"
          :collapsed="collapsed"
          show-trigger
          @collapse="collapsed = true"
          @expand="collapsed = false"
        >
          <n-menu
            :collapsed="collapsed"
            :collapsed-width="64"
            :collapsed-icon-size="22"
            :options="menuOptions"
            :render-label="renderMenuLabel"
            :render-icon="renderMenuIcon"
            :expand-icon="expandIcon"
          />
        </n-layout-sider>
        <n-layout>
          <RouterView />
        </n-layout>
      </n-layout>
    </n-space>
  </main>
</template>

<style scoped lang="less">
.container {
  height: 100vh;
}
</style>
